<template>
<div class="page has-headbar page-stadium-search">
  <head-bar :title="$route.meta.title" :prevRoute="{name: 'stadium-home'}" />
  <van-list class="list-container"
  v-model="moreLoading"
  :finished="moreFinished"
  finished-text="没有更多了"
  :immediate-check="false"
  @load="onLoad">
    <stadium-item :key="index" v-for="(item, index) in list" :itemData="item"></stadium-item>
  </van-list>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { API_VENUES_SEARCH } from '@/service/veneue'
import StadiumItem from './components/StadiumItem'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  components: {
    StadiumItem
  },
  data () {
    return {
      loading: false,
      moreLoading: false,
      moreFinished: false,
      pageNumber: 0,
      pageSize: 8,
      list: []
    }
  },
  computed: {
    ...mapGetters({
      userPosition: 'getUserPosition'
    })
  },
  mounted () {
    this.wechatHideMenu()
    // console.log(this.$route.query.search)
    this.requestList(resData => {
      this.list = resData.list.resultList
    })
  },
  watch: {
    userPosition: {
      handler (newValue) {
        this.loading = true
        this.pageNumber = 0
        this.list = []
        let reqData = {
          venueName: this.$route.query.search,
          pageNumber: this.pageNumber + 1,
          pageSize: this.pageSize,
          lon: this.userPosition.lng,
          lat: this.userPosition.lat
        }
        API_VENUES_SEARCH(reqData).then((resData) => {
          let resultList = resData.list.resultList
          let totalSize = resData.list.totalSize
          if (resultList.length <= 0) {
            this.moreFinished = true
            this.list = []
          } else {
            this.pageNumber = this.pageNumber + 1
            this.list = resultList
            if (totalSize === this.list.length) {
              this.moreFinished = true
            }
          }
        }).catch(() => {
          this.moreFinished = true
          this.list = []
        }).finally(() => {
          this.loading = false
        })
      },
      deep: true
    }
  },
  methods: {
    requestList (callback) {
      this.loading = true
      let reqData = {
        venueName: this.$route.query.search,
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize,
        lon: this.userPosition.lng,
        lat: this.userPosition.lat
      }
      return API_VENUES_SEARCH(reqData).then((resData) => {
        let resultList = resData.list.resultList
        let totalSize = resData.list.totalSize
        if (resultList.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          callback && callback(resData)
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      }).finally(() => {
        this.loading = false
        this.moreLoading = false
      })
    },
    onLoad () {
      if (this.loading) return
      this.requestList((resData) => {
        this.list = [...this.list, ...resData.list.resultList]
      })
    }
  }
}
</script>

<style lang="less">
.page-stadium-search{
  .list-container{
    overflow: hidden;
    // min-height: calc(100vh - @headBarHeight - 100px);
  }
}
</style>
